<template>
  <el-dialog :visible.sync="dialogVisible" width="70%" title="利润计算" @close="handleClose">
    <el-alert :closable="false" type="error">结果仅供参考,实际情况请结合租金、电费、人工等成本</el-alert>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%"
      show-summary
      :summary-method="getSummaries"
      default-expand-all
      size="medium"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row v-for="(item,index) in props.row.detailBomList" :key="index" style="margin-left: 80px">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="材料名称:">
                <span>{{ item.materialName }}</span>
              </el-form-item>
              <el-form-item label="单价:">
                <money-format v-model="item.unitPrice" />
              </el-form-item>
              <el-form-item label="单只用量:">
                <span>{{ item.quantity }}{{ item.unit }}</span>
              </el-form-item>
              <el-form-item label="总用量:">
                <span>{{ item.totalQuantity }}{{ item.unit }}</span>
              </el-form-item>
              <el-form-item label="成本:">
                <money-format v-model="item.materialCost" />
              </el-form-item>
            </el-form>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" prop="productName" />
      <el-table-column label="单价" prop="unitPrice">
        <template slot-scope="scope">
          <money-format v-model="scope.row.unitPrice" />
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="quantity">
        <template slot-scope="scope">
          {{ scope.row.quantity }}
        </template>
      </el-table-column>
      <el-table-column label="总价" prop="amount">
        <template slot-scope="scope">
          <money-format v-model="scope.row.amount" />
        </template>
      </el-table-column>
      <el-table-column label="物料成本" prop="materialCost">
        <template slot-scope="scope">
          <money-format v-model="scope.row.materialCost" />
        </template>
      </el-table-column>
      <el-table-column label="利润" prop="profit">
        <template slot-scope="scope">
          <money-format v-model="scope.row.profit" />
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { order_profit_calculation } from '@/api/sale/order'

export default {
  name: 'BomDetailModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      tableLoading: false,
      tableData: []
    }
  },
  methods: {
    init(orderId) {
      this.tableLoading = true
      order_profit_calculation(orderId).then(resp => {
        if (resp.success) {
          this.tableData = resp.data
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1) {
          sums[index] = ''
          return
        }
        if (index === 2) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 3) {
            sums[index] = this.moneyFormatter(sums[index])
          } else {
            sums[index] = this.moneyFormatter(sums[index]) + ' 元'
          }
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    moneyFormatter(data) {
      // return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return data.toLocaleString('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 20%;
}
</style>
